<template>
	<view>
		<mescroll-uni
			:style="'height: ' + height + 'px'"
			ref="mediaListScroll"
			:fixed="false"
			@init="mescrollInit"
			@down="downCallback"
			:down="downOption"
			@up="upCallback"
			:up="upOption"
		>
			<!-- 搜索框 -->
			<block v-if="showSearch"><Search ref="search" searchName="搜索游戏" targetPage="xj_distribution/media/index" /></block>
			<block v-if="showCategory">
				<SLSticky>
					<u-tabs
						style="background: #fff;"
						:list="category.datas"
						lineColor="#fe560a"
						:activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							fontSize: '32rpx',
							transform: 'scale(1)'
						}"
						:inactiveStyle="{
							color: '#606266',
							fontSize: '32rpx',
							transform: 'scale(1)'
						}"
						itemStyle="padding-left: 15rpx; padding-right: 15rpx; height: 82rpx;"
						@change="onChangeTab"
					>
						<view slot="right" style="padding-right: 10rpx;" @tap="toTargetCategory()"><u-icon name="list" size="52" bold></u-icon></view>
					</u-tabs>
				</SLSticky>
			</block>
			<!-- 媒体 -->
			<block v-if="showMedia"><Media ref="media" :gridDatas="datas" /></block>
		</mescroll-uni>
	</view>
</template>

<script>
import CategoryApi from '@/api/category/category.js';
import MediaApi from '@/api/media/media.js';
import Constants from '@/constants';
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
import Scroll from '@/components/mixins/scroll.js';
import * as Util from '@/utils/index.js';
import Search from '@/pages/components/search/search.vue';
import Media from '@/pages/components/media/media.vue';
import SLSticky from '@/components/sl-sticky/index.vue';

export default {
	//
	name: 'pageIndex',
	//
	mixins: [Constants, Scroll],
	//
	components: {
		MescrollUni,
		Search,
		Media,
		SLSticky
	},
	//
	data() {
		return {
			height: '',
			//查询参数
			query: {},
			//查询控件
			search: {},
			showSearch: false,
			// targetPage: pages.goodsIndexPage,
			//分类控件
			category: {},
			showCategory: false,
			//cms控件
			media: {},
			showMedia: false
		};
	},
	//
	props: {
		items: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	mounted() {
		//挂在查询组件
		this.search = this.items.search;
		if (!Util.isEmptyObject(this.search)) {
			this.showSearch = true;
		}
		//挂在分类组件
		this.category = this.items.category;
		if (!Util.isEmptyObject(this.category)) {
			this.$set(this.category, 'datas', [
				{
					id: '1',
					name: '全部'
				}
			]);
			this.loadCategory();
			//
			this.showCategory = true;
		}
		//挂在商品组件
		this.media = this.items.media;
		if (!Util.isEmptyObject(this.media)) {
			this.$nextTick(() => {
				this.height = this.initMescrollHeight(this.$refs.mediaListScroll, this.StatusBar);
			});
			this.downCallback();
			this.showMedia = true;
		}
	},
	//
	methods: {
		//根据分类查询
		onChangeTab(item) {
			//todo，查询有问题
			this.query.categoryId = item.id;
			this.downCallback();
			//todo 查询功能
		},
		//跳转分类主页
		toTargetCategory() {
			this.$app.navTo(this.pages.categoryIndexPage, {
				targetPage: this.pages.mediaIndexPage,
				type: this.categoryType.cms
			});
		},
		//加载分类
		loadCategory: async function() {
			let res = await CategoryApi.queryTwo(this.categoryType.cms);
			for (let i = 0; i < res.obj.length; i++) {
				this.category.datas.push({ id: res.obj[i].id, name: res.obj[i].name });
			}
		},
		//加载cms内容
		loadPage: async function() {
			let res = await MediaApi.query(this.query, this.param);
			return res.obj || {};
		}
	}
};
</script>

<style lang="scss" scoped></style>
